<template>
  <el-dialog :title="!dataForm.id ? '商家开户' : '商家编辑'" :close-on-click-modal="false" :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="80px">
      <el-form-item label="商家名称" prop="name" label-width="85px">
        <el-input v-if="!dataForm.id" v-model="dataForm.name" placeholder="请输入账号"></el-input>
        <span v-else>{{ dataForm.name }}</span>
      </el-form-item>
      <el-form-item label="联系人" prop="contact" label-width="85px">
        <el-input v-model="dataForm.contact" placeholder="请输入联系人"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="contactPhoneNumber" label-width="85px">
        <el-input type="number" maxlength="11"  v-model="dataForm.contactPhoneNumber" placeholder="请输入联系电话"></el-input>
      </el-form-item>
      <el-form-item label="联系地址" prop="introduction" label-width="85px">
        <!-- <el-input v-model="dataForm.introduction" placeholder="请输入联系地址"></el-input> -->
        <template v-if="!dataForm.id">
          <v-distpicker 
                  @province="onChangeProv"
                  @city="onChangeCity"
                  @area="onChangeArea"></v-distpicker>
        </template>
        <template v-else>
          <v-distpicker
                 :placeholders="placeholders"
                  @province="onChangeProv"
                  @city="onChangeCity"
                  @area="onChangeArea"></v-distpicker>
        </template>
        
      </el-form-item>
      <el-form-item label="详细地址" prop="address" label-width="85px">
        <el-input type="textarea"  v-model="dataForm.address" placeholder="请输入详细地址"></el-input>
      </el-form-item>
      <el-form-item label="类型" prop="categoryOperateIds" label-width="85px">
        <!-- <el-select v-model="dataForm.roleId" placeholder="请选择类型">
          <el-option v-for="item in roleList" :key="item.roleId" :label="item.roleName" :value="item.roleId">
          </el-option>
        </el-select> -->
        <el-select
        v-model="dataForm.categoryOperateIds"
        multiple
        filterable
        allow-create
        default-first-option
        placeholder="请选择类型">
        <el-option  v-for="item in options" :key="item.id" :label="item.categoryName" :value="item.id"></el-option>
      </el-select>
      </el-form-item>
      <el-form-item label="营业执照编号" prop="licenseNumber" label-width="150px">
        <el-input v-model="dataForm.licenseNumber" placeholder="请输入营业执照编号"></el-input>
      </el-form-item>
      <el-form-item label="营业执照" prop="pic">
        <el-button
          v-if="dataForm.pic == '' || dataForm.pic == null"
          type="primary"
          @click="uploadHandle()"
          >点击上传</el-button
        >
        <img
          class="Avatars"
          v-if="dataForm.pic"
          :src="$ossUrl+dataForm.pic"
          alt=""
          @click="uploadHandle()"
        />
        <p class="ae">建议尺寸：60*60，，图片小于5M</p>
      </el-form-item>
      <!-- 帐户创建： -->
     <template  v-if="!this.dataForm.id">
        <div class="el-dialog__header">
          <span class="el-dialog__title" >帐户创建：</span>
        </div>
        <el-form-item label="商家账号" prop="account" label-width="85px">
          <el-input v-model="dataForm.account" placeholder="请输入商家账号" ></el-input>
        </el-form-item>
        <el-form-item label="登录密码" prop="password" label-width="85px">
          <el-input v-model="dataForm.password" placeholder="请输入登录密码"></el-input>
        </el-form-item>
     </template>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
      <el-button @click="visible = false">取消</el-button>
    </span>
    <upload v-if="uploadVisible" ref="upload" :uploadList='uploadList'></upload>
  </el-dialog>
</template>

<script>
import md5 from "js-md5";
import Upload from "./oss-upload";
import VDistpicker from 'v-distpicker'

export default {
  data() {
    return {
      placeholders: {
        province: '请选择省份',
        city: '请选择市区',
        area: '请选择县城或区',
      },
      isdisabled: false,
      uploadVisible: false,
      visible: false,
      dataForm: {
        // name:'24小时棋牌室',//商家名称
        // contact:'张大大',//联系人
        // contactPhoneNumber:'123456789101',//联系电话
        // province:'广东省',//省
        // city:'深圳市',//市
        // address:'龙华区',//详细地址
        // area:'',//区
        // categoryOperateIds:'',//类型
        // licenseNumber:'cc123456789123456789',//营业执照编号
        // pic: "",//图片
        // account:'tetxtetx',//商家账号
        // password:'123456',//登录密码
        // 
        name:'',//商家名称
        contact:'',//联系人
        contactPhoneNumber:'',//联系电话
        province:'',//省
        city:'',//市
        address:'',//详细地址
        area:'',//区
        categoryOperateIds:'',//类型
        licenseNumber:'',//营业执照编号
        pic: "",//图片
        account:'',//商家账号
        password:'',//登录密码
      },
      roleList: [],
      options: [],
      dataRule: {
        name: [
          { required: true, message: "商家名称不能为空", trigger: "blur" },
        ],
        contact: [
          { required: true, message: "联系人不能为空", trigger: "blur" },
        ],
        contactPhoneNumber: [
          { required: true, message: "联系电话不能为空", trigger: "blur" },
        ],
        categoryOperateIds: [
          { required: true, message: "类型不能为空", trigger: "blur" },
        ],
        licenseNumber: [
          { required: true, message: "营业执照编号不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "登录密码不能为空", trigger: "blur" },
        ],
        account: [
          {required: true,message: "商家账号不能为空",trigger: "blur"},
        ],
      },
    };
  },
  components: {
    Upload,
    VDistpicker 
  },
  methods: {
    onChangeProv (e) {
      console.log("省", e);
      this.dataForm.province=e.value
    },
    onChangeCity (e) {
      console.log("市", e);
      this.dataForm.city=e.value
    },
    onChangeArea (e) {
      this.dataForm.area=e.value
      console.log("县", e);
    },
    init(id) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.id) {
          this.isdisabled = true;
          this.$http({
            url: this.$http.adornUrl(
              `/admin/business/view?id=${this.dataForm.id}`
            ),
            method: "get",
            params: this.$http.adornParams(),
          }).then(({ data }) => {
            if (data && data.code === "200") {
              this.dataForm={...data.data}
              this.placeholders.province=data.data.province
              this.placeholders.city=data.data.city
              this.placeholders.area=data.data.area
              console.log(this.placeholders);
              this.dataForm.categoryOperateIds=[]
              data.data.businessCategoryOperateList.map(itme=>{
                if(itme.selectFlag==1){
                  this.dataForm.categoryOperateIds.push(itme.id)
                }
              })
           
              this.dataForm.pic=data.data.licensePic
            }
            this.isdisabled = false;
          });
        }
      });
    },
    getJobList() {
      this.$http({
        url: this.$http.adornUrl(`/common/category/operate/list`),
        method: "get",
        params: this.$http.adornParams(),
      }).then(({ data }) => {
        if (data && data.code === "200") {
          this.options = data.list;
        }
      });
    },
    getRoleList() {
      this.$http({
        url: this.$http.adornUrl(`/common/role/list`),
        method: "get",
        params: this.$http.adornParams(),
      }).then(({ data }) => {
        if (data && data.code === "200") {
          this.roleList = data.list;
        }
      });
    },
    uploadHandle() {
      this.uploadVisible = true;
      this.$nextTick(() => {
        this.$refs.upload.init();
      });
    },
    uploadList(e) {
      this.dataForm.pic = e.trim();
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          console.log(this.dataForm,"+++++++++++");
          // var userId = {}
          var password = {}
          // if (this.dataForm.id) {
          //   userId.userId = Number(this.dataForm.id)
          // }
          if (this.dataForm.password) {
            password.password = md5(this.dataForm.password).toLowerCase()
          }
          this.$http({
            url: this.$http.adornUrl(this.dataForm.id ? '/admin/business/update' : `/admin/business/add`),
            method: "post",
            data: this.$http.adornData({
              name: this.dataForm.name,
              contact: this.dataForm.contact,
              contactPhoneNumber: this.dataForm.contactPhoneNumber,
              province: this.dataForm.province,
              city: this.dataForm.city,
              area:this.dataForm.area,
              address: this.dataForm.address,
              categoryOperateIds: this.dataForm.categoryOperateIds,
              licensePic:this.dataForm.pic,
              licenseNumber:this.dataForm.licenseNumber,
              account: this.dataForm.account,
              id:this.dataForm.id,
              ...password
            }),
          }).then(({ data }) => {
            if (data && data.code === "200") {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
  },
};
</script>
<style lang="scss">
//修改地区选择框样式
.distpicker-address-wrapper {
  select {
    width: 250px !important;
    padding: 0px 10px !important;
    height: 30px !important;
    font-size: 15px !important;
    line-height: 30px !important;
  }
}
</style>

<style >
.ae {
  color: red;
  font-size: 12px;
  line-height: 15px;
  margin: 0;
  margin-top: 10px;
}

.Avatars {
  width: 40px;
  height: 40px;
  border: 1px solid #ccc;
}

.v-modal {
  z-index: 1999 !important;
}
</style>